<template>
  <div>
<!--    轮播图展示-->
    <v-wrapper :cimgs="items"></v-wrapper>
<!--    推荐栏-->
    <div class="recommand">
      <div class="recommand-item" v-for="(item, i) in recommends" :key="i">
        <img :src="item.image" alt="推荐商品">
        <span>{{item.title}}</span>
      </div>
    </div>
<!--    hot-->
<!--    <div class="hot">-->
<!--      <div class="content">-->
<!--        <img src="" alt="">-->
<!--        <text></text>-->
<!--      </div>-->
<!--    </div>-->

<!--商品展示列表-->
<!--    <div class="goodsC">-->
<!--      <div class="good"></div>-->
<!--    </div>-->

  </div>
</template>
<script>
import VWrapper from '../../components/common/Wrapper'
export default {
  data() {
    return {
      //  banner数据
      banners: [],
      //  recommends
      recommends: [],
      items: [
        'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg',
        'https://s10.mogucdn.com/mlcdn/c45406/180926_31eb9h75jc217k7iej24i2dd0jba3_750x390.jpg',
        'https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg',
        'https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg'
      ]
    }
  },
  components: {
    VWrapper
  },
  created() {
    this.getInfo()
  },
  computed: {},
  methods: {
    async getInfo() {
      const { data: res } = await this.$http.get('home/multidata')
      if (res.success) {
        this.banners = res.data.banner.list
        this.recommends = res.data.recommend.list
        console.log(this.banners)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .recommand {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: start;
    flex-wrap: wrap;
    >.recommand-item {
      height: 110px;
      text-align: center;
      >img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: block;
      }
    }
  }
  .goodsC{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: start;
    flex-wrap: wrap;
    >.good{
      width: 40%;
      height: 300px;
      /*background: #000;*/
    }
  }
</style>
